<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慧题通-笔记管理</title>
</head>
<body>
<el-menu
        id="menu"
        default-active="0"
        class="el-menu-vertical-demo"
        style="width: 135px;float: left"
>
    <el-menu-item index="0">
        <i class="el-icon-help"></i>
        <span slot="title">主页</span>
    </el-menu-item>
    <el-menu-item index="1" @click="toMyQuestion">
        <i class="el-icon-location"></i>
        <span slot="title">我的题目</span>
    </el-menu-item>
    <el-menu-item index="2" @click="toAllQuestion">
        <i class="el-icon-menu"></i>
        <span slot="title">全站题目</span>
    </el-menu-item>
    <el-menu-item index="3" @click="toDoQuestion">
        <i class="el-icon-setting"></i>
        <span slot="title">练习题目</span>
    </el-menu-item>
    <el-menu-item index="4" @click="toAddQuestion">
        <i class="el-icon-document"></i>
        <span slot="title">添加题目</span>
    </el-menu-item>
</el-menu>

<div id="app" v-loading="loading" style="overflow: scroll;height: 100%">
    <el-page-header @back="goBack" content="笔记管理">
    </el-page-header>

    <div style="display: flex; justify-content: center;margin-top: 5px">
        <el-card class="card" style="height:100%;width: 100%;margin:0 0">
            <el-row>
                <el-col style="display: flex; align-items: center;">
                    <p style="margin-right: 10px;width: 70px">笔记内容</p>
                    <el-input
                            placeholder="请输入笔记内容"
                            v-model="queryCondition.content"
                            clearable
                            style="width: 500px">
                    </el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col style="display: flex; align-items: center;">
                    <p style="margin-right: 10px;width: 70px">是否公开</p>
                    <el-checkbox-group v-model="queryCondition.open">
                        <el-checkbox-button v-for="(option,index) in openOptions" :label="index" :key="option">
                            {{option}}
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-col>
            </el-row>
            <el-row>
                <el-col style="display: flex; align-items: center;">
                    <el-button type="primary" @click="query">筛选</el-button>
                    <el-button type="danger" @click="deleteSome">删除</el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>

    <el-table
            :data="tableNotes"
            height="98vh"
            border
            style="width: 100%;"
            :header-cell-style="{'text-align':'center'}"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                align="center">
        </el-table-column>
        <el-table-column
                label="序号"
                type="index"
                :index="1"
                width="50"
                align="center">
        </el-table-column>
        <el-table-column
                sortable
                prop="content"
                label="笔记内容"
                min-width="50%">
        </el-table-column>
        <el-table-column
                sortable
                prop="time"
                label="修改时间"
                min-width="15%"
                align="center">
        </el-table-column>
        <el-table-column
                prop="open"
                label="是否公开"
                min-width="10%"
                align="center">
        </el-table-column>
        <el-table-column
                label="操作"
                min-width="15%"
                align="center">
            <template slot-scope="scope">
                <!--<el-button @click="seeNoteDetail(scope.row)" type="text" size="small">查看</el-button>-->
                <el-button @click="editNote(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" style="color: red" @click="deleteNote(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--编辑笔记对话框-->
    <el-dialog title="编辑笔记" :visible.sync="updatingNote" v-loading="loadingEditNote">
        <el-form :model="updateNote" label-position="right" label-width="80px" style="width: 100%">
            <el-form-item label="内容">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 15}"
                        v-model="updateNote.content"
                        shadow="hover"
                        body-style="padding: 0px;margin: 0px;margin-left: 10px;">
                </el-input>
            </el-form-item>
            <el-form-item label="公开">
                <el-switch v-model="updateNote.open"
                           active-value="1"
                           inactive-value="0">
                </el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEditNote">取 消</el-button>
            <el-button type="primary" @click="finishEditNote">确 定</el-button>
        </div>
    </el-dialog>
</div>

</body>

<script src="../../js/vue.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">

<link rel="stylesheet" href="../../css/main.css">

<script src="../../js/common.js"></script>
<script src="../../js/menu.js"></script>
<script src="../../js/note_manage.js"></script>

</html>